<template>
	<view class="columnbox wdh-100 content">
		<view class="wdh-100 columnbox color-box">
			<view class="wdh-100" :style="{'height':menutop+10+'px'}"></view>
			<view class="rowbox wdh-100 jus" @click="showUserInfo" v-if="isLogin">
				<view class="columnbox user-img-box">
					<image mode="aspectFill" class="user-img"
						:src="userInfo.user.avatar==null?'/static/img/logo.jpeg':userInfo.user.avatar">
					</image>
					<!-- <view class="no-iden" v-if="userInfo.user.verified==3">已实名</view>
					<view class="no-iden" v-else>未实名</view> -->
				</view>
				<view class="columnbox als" style="margin-left: 16rpx;">
					<view class="rowbox user-name">
						{{userInfo.user.nickName}}
						<!-- <image src="/static/img/vip-icon.png" class="vip-icon"></image> -->
					</view>
					<view class="rowbox user-id">{{userInfo.user.uuid}}
						<image @click.stop="showEwm" src="/static/img/ewm.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="rowbox wdh-100 jus" @click="toLog" v-else>
				<image mode="aspectFill" class="user-img" src="/static/img/nolog.png">
				</image>
				<view class="rowbox nolog-title">
					未登录，点击登录
				</view>
			</view>
			<view class="wdh-100 rowbox change-store">
				<view class="rowbox change-box">
					<image src="/static/img/change.png" mode="widthFix"></image>
					切换商家
				</view>
			</view>
			<view class="rowbox vip-list">
				<image src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/734537ac01e14e9daae44ffd210bf09f.png"
					mode="widthFix" class="wdh-100"></image>
				<view class="rowbox spb vip-info">
					<view class="columnbox" @click="showVip">
						<image class="vip-img" src="/static/img/hyzx.png" mode="widthFix"></image>
						<view class="rowbox vip-name">

							会员中心
						</view>
						<view class="rowbox vip-desc">会员权益升级

						</view>
					</view>
					<view class="columnbox" @click="showRecruit">
						<image class="vip-img" src="/static/img/yyzs.png" mode="widthFix"></image>
						<view class="rowbox vip-name">
							异业招商
						</view>
						<view class="rowbox vip-desc">商家快捷入驻

						</view>
					</view>
					<view class="columnbox" @click="showScore">
						<image class="vip-img" src="/static/img/jfsc.png" mode="widthFix"></image>
						<view class="rowbox vip-name">
							积分商城
						</view>
						<view class="rowbox vip-desc">换购精美商品

						</view>
					</view>
				</view>
			</view>
			<view class="rowbox spb m-box box-one">
				<view class="columnbox m-one-box" @click="showOrder">
					<!-- <view class="dot-box">1</view> -->
					<image src="/static/img/wddd.png" mode="heightFix" class="m-img"></image>
					我的订单
				</view>
				<view class="columnbox m-one-box" @click="showSchedule">
					<!-- <view class="dot-box">10</view> -->
					<image src="/static/img/wddb.png" mode="heightFix" class="m-img"></image>
					我的待办
				</view>
				<view class="columnbox m-one-box" @click="showCarManage">
					<image src="/static/img/wdck.png" mode="heightFix" class="m-img"></image>
					我的车库
				</view>
				<view class="columnbox m-one-box" @click="showCoupon">
					<image src="/static/img/lqzx.png" mode="heightFix" class="m-img"></image>
					领券中心
				</view>

			</view>
		</view>
		<view class="columnbox wdh-100 bottom-content">
			<view class="wdh-100 rowbox jus info-title">我的钱包</view>
			<view class="columnbox m-box wallet-box">
				<view class="rowbox wdh-100 jus w-box-list">
					<view class="columnbox w-box" @click="showMyCoupon">
						<view>{{walletinfo.couponsNum}}</view>
						<view>洗车券</view>
					</view>
					<view class="columnbox w-box" @click="showScore">
						<view>{{walletinfo.integral}}</view>
						<view>积分</view>
					</view>
					<view class="columnbox w-box" @click="showWallet">
						<view><text style="font-size: 24rpx;margin-right: 4rpx;">¥</text> {{walletinfo.cash}}</view>
						<view>零钱</view>
					</view>
				</view>
				<view class="rowbox wdh-100" style="justify-content: flex-end;">
					<view class="rowbox recharge-btn" @click="toRecharge">去充值</view>
				</view>
			</view>
			<view class="wdh-100 rowbox spb info-title">
				<view>我的推广</view>
				<view class="rowbox tuiguang-box">
					查看详情 <u-icon name="arrow-right" size="24rpx" color="#72778A"></u-icon>
				</view>
			</view>
			<view class="columnbox m-box tg-box" @click="topopularize">

				<view class="rowbox wdh-100 spb w-box-list">
					<view class="columnbox w-box">
						<view>0</view>
						<view>推荐人数</view>
					</view>
					<view class="columnbox w-box">
						<view>0</view>
						<view>即将到账</view>
					</view>
					<view class="columnbox w-box">
						<view style="color: #17698F;">¥0.00</view>
						<view>已到账</view>
					</view>
				</view>
			</view>
			<image src="/static/img/user-banner.png" mode="widthFix" class="banner-img"></image>
			<view class="m-box wdh-100 f-box">
				<u-scroll-list>
					<view class="rowbox">
						<view class="columnbox">
							<view class="columnbox f-one-box">
								<image src="/static/img/nuoche.png" mode="heightFix"></image>
								<view>挪车码</view>
							</view>

							<view class="columnbox f-one-box" @click="showSet">
								<image src="/static/img/set.png" mode="heightFix"></image>
								<view>设置</view>
							</view>
						</view>
						<view class="columnbox">
							<view class="columnbox">
								<view class="columnbox f-one-box" @click="showCompanyIden">
									<image src="/static/img/qyrz.png" mode="heightFix"></image>
									<view>企业认证</view>
								</view>
							</view>

							<view class="columnbox f-one-box">
								<button open-type="contact"
									style="width: 100%;height: 100%;position: absolute;opacity: 0;">客服</button>
								<image src="/static/img/zxkf.png" mode="heightFix"></image>
								<view>在线客服</view>
							</view>

						</view>

						<view class="columnbox">
							<view class="columnbox f-one-box">
								<image src="/static/img/wgtc.png" mode="heightFix"></image>
								<view>无感停车</view>
							</view>
							<view class="columnbox f-one-box" @click="fapiao1">
								<image src="/static/img/fpsq.png" mode="heightFix"></image>
								<view>发票申请</view>
							</view>
						</view>

						<view class="columnbox">
							<view class="columnbox f-one-box" @click="xczJiameng">
								<image src="/static/img/xczjm.png" mode="heightFix"></image>
								<view>洗车站加盟</view>
							</view>
							<view class="columnbox f-one-box" @click="showFeedback">
								<image src="/static/img/bzyfk.png" mode="heightFix"></image>
								<view>帮助与反馈</view>
							</view>
						</view>

						<view class="columnbox">
							<view class="columnbox f-one-box" @click="rewardFeedback">
								<image src="/static/img/yjts.png" mode="heightFix"></image>
								<view>有奖投诉</view>
							</view>
							<view class="columnbox f-one-box" @click="towallent">
								<image src="/static/img/xfmx.png" mode="heightFix"></image>
								<view>消费明细</view>
							</view>
						</view>

						<view class="columnbox">
							<view class="columnbox f-one-box" @click="">
								<image src="/static/img/qyrzh.png" mode="heightFix"></image>
								<view>企业入驻</view>
							</view>
							<view class="columnbox f-one-box" @click="">
								<image src="/static/img/etc.png" mode="heightFix"></image>
								<view>ETC服务</view>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
		</view>
		<!-- <view v-if="isLogin" @click="quitLog" class="quit-btn rowbox">退出登录</view> -->
		<view class="app-desc" style="margin-top: 56rpx;">摩卡兄弟•智慧洗车V2.0.1</view>
		<view class="app-desc" style="margin-bottom: 10rpx;">增值电信业务经营许可证：津B2-20230354</view>
		<view class="app-desc" style="margin-bottom: 40rpx;">津ICP备2022005713号-12A</view>
		<tabBar :value='3'></tabBar>
	</view>
</template>

<script>
	import tabBar from '@/components/tabbar/tabbar.vue'
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				menutop: 20,
				walletinfo: {
					couponsNum: 0,
					integral: 0,
					cash: '0.00'
				}
			};
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.menutop = wx.getMenuButtonBoundingClientRect().top
			// #endif
			// #ifdef MP-ALIPAY
			this.menutop = my.getMenuButtonBoundingClientRect().top
			// #endif
		},
		onShow() {
			if (this.isLogin) {
				this.getWallet()
			} else {
				this.walletinfo = {
					couponsNum: 0,
					integral: 0,
					cash: '0.00'
				}
			}
		},
		computed: {
			// 通过计算属性将 state 中的 count 映射到组件
			isLogin() {
				return this.$store.state.isLogin;
			},
			userInfo() {
				return this.$store.state.user;
			},
		},
		watch: {

		},
		methods: {
			// 跳转qianbaomingxi
			towallent(){
				this.$tab.navigateTo('/packageC/walletTransactions/walletTransactions')
			},
			// 跳转发票申请
			fapiao1(){
				this.$tab.navigateTo('/packageC/Invoiceapplication/Invoiceapplication')
			},
			// 跳转我的推广
			topopularize(){
				this.$tab.navigateTo('/packageC/popularize/popularize')
			},
			toRecharge() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/pages/coupon/buyCoupon'
					})
				} else {
					this.$noLog()
				}
			},
			showSet() {
				uni.navigateTo({
					url: '/packageA/set/set'
				})
				// wx.openSetting({
				// 	success: res => {}
				// })
			},
			quitLog() {
				uni.clearStorageSync()
				this.$store.dispatch('actionsHandleUserInfoChange', '');
				this.$store.dispatch('actionsHandleIsLoginChange', false);
				this.$store.dispatch('actionsHandleTokenChange', '');
				this.walletinfo = {
					couponsNum: 0,
					integral: 0,
					cash: '0.00'
				}
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			getWallet() {
				this.$req.get('/xcx/userWallet').then(res => {
					if (res.data.data) {
						this.walletinfo = res.data.data
					}
				})
			},
			showCompanyIden() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/packageA/companyIden/index'
					})
				} else {
					this.$noLog()
				}
			},
			//有奖投诉
			rewardFeedback() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/packageA/rewardFeedback/add'
					})
				} else {
					this.$noLog()
				}
			},
			showEwm() {
				this.$req.get('/xcx/user/generateQr').then(res => {

				})
			},
			// 帮助与反馈
			showFeedback() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/packageA/feedback/index'
					})
				} else {
					this.$noLog()
				}
			},
			// 洗车站加盟
			xczJiameng() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/packageA/jiameng/index'
					})
				} else {
					this.$noLog()
				}
			},
			toLog() {
				this.$noLog()
			},
			//零钱
			showWallet() {
				uni.navigateTo({
					url: '/pages/wallet/wallet'
				})
			},
			//我的待办
			showSchedule() {
				uni.navigateTo({
					url: '/pages/schedule/schedule'
				})
			},
			// 我的车库
			showCarManage() {
				uni.navigateTo({
					url: '/packageA/carManage/list'
				})
			},
			showMyCoupon() {
				uni.navigateTo({
					url: '/pages/coupon/myCoupon'
				})
			},
			showCoupon() {
				uni.navigateTo({
					url: '/pages/coupon/gift'
				})
			},
			// 我的订单
			showOrder() {
				uni.navigateTo({
					url: '/pages/order/order'
				})
			},
			// 积分商城
			showScore() {
				uni.navigateTo({
					url: '/pages/scoreStore/scoreStore'
				})
			},
			// 异业招商
			showRecruit() {
				uni.navigateTo({
					url: '/pages/user/recruit'
				})
			},
			//会员中心
			showVip() {
				uni.navigateTo({
					url: '/packageA/vip/index'
				})
			},
			showUserInfo() {
				uni.navigateTo({
					url: '/pages/user/userInfo'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F4F5FA;
		min-height: 100vh;
		justify-content: flex-start;
		font-family: PingFang SC;
		width: 100%;
		overflow: hidden;
	}

	.color-box {
		background: linear-gradient(to bottom, #317bc7, #F4F5FA);
		padding: 0 30rpx;
	}

	.user-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
	}

	.nolog-title {
		margin-left: 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.user-img-box {
		width: 100rpx;
		height: 100rpx;
		position: relative;
		overflow: hidden;
		border-radius: 100rpx;

		.no-iden {
			width: 100rpx;
			background: rgba(#000, 0.7);
			position: absolute;
			left: 0;
			bottom: 0;
			justify-content: flex-end;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 20rpx;
			color: #FFFFFF;
			height: 35rpx;
			text-align: center;
		}
	}

	.user-name {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-top: 8rpx;
	}

	.vip-box {
		background: #ffcd00;
		color: #fff;
		font-size: 28rpx;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		line-height: 28rpx;
		margin-left: 20rpx;
	}

	.user-id {
		color: #fff;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		margin-top: 10rpx;

		image {
			margin-left: 20rpx;
			width: 25rpx;
			height: 25rpx;
		}
	}

	.change-store {
		justify-content: flex-end;

	}

	.change-box {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;

		image {
			width: 23rpx;
			height: 23rpx;
			margin-right: 10rpx;
		}
	}

	.vip-list {
		margin-top: 36rpx;
		width: 100%;
		position: relative;

		.vip-info {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 4;
			padding: 0 30rpx;
		}

		.vip-img {
			width: 72rpx;
			height: 72rpx;
			margin-bottom: 20rpx;
			margin-top: 24rpx;
		}

		.vip-name {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #FCF0E6;
		}

		.vip-desc {
			margin-top: 10rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #72778A;
		}
	}

	.m-box {
		background: #FFFFFF;
		border-radius: 24rpx;
		width: 100%;

		.m-one-box {
			width: 25%;
			font-size: 28rpx;
			position: relative;
			font-weight: 400;
			font-size: 28rpx;
			color: #212121;

			.m-img {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 12rpx;
			}

			.dot-box {
				position: absolute;
				background: #BD3124;
				right: 20rpx;
				top: -20rpx;
				font-family: DINPro, DINPro;
				font-weight: 900;
				font-size: 20rpx;
				color: #FFFFFF;
				padding: 0 8rpx;
				border-radius: 100rpx;
				z-index: 9;
				transform: scale(.7);
				height: 26rpx;
			}
		}
	}

	.tg-box {
		margin-top: 20rpx;
		padding: 24rpx;
	}

	.wallet-box {
		margin-top: 20rpx;
		padding: 24rpx 0;
	}

	.box-one {
		padding: 0 24rpx;
		height: 148rpx;
		margin-top: 36rpx;
	}

	.info-title {
		margin-top: 36rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: #000000;
	}

	.tuiguang-box {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}

	.w-box-list {
		.w-box {
			width: 33%;
		}
	}

	.w-box>view:nth-child(1) {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #212121;
		margin-bottom: 8rpx;
	}

	.w-box>view:nth-child(2) {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #72778A;
	}

	.recharge-btn {
		width: 132rpx;
		height: 54rpx;
		background: linear-gradient(138deg, #FBE3C8 0%, #F6D0AE 100%);
		border-radius: 44rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #371901;
		margin-top: 20rpx;
		margin-right: 48rpx;
	}

	.banner-img {
		margin-top: 36rpx;
		height: 200rpx;
		width: 100%;
	}

	.f-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #212121;
		padding: 0;
		margin-top: 36rpx;

		image {
			width: 44rpx;
			height: 44rpx;
			margin-bottom: 10rpx;
		}


	}

	.f-one-box {
		position: relative;
		width: 169rpx;
		margin-top: 36rpx;
	}

	.app-desc {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		margin-top: 12rpx;
	}

	.quit-btn {
		font-size: 28rpx;
		width: 600rpx;
		border: #17698F solid 1px;
		height: 90rpx;
		color: #17698F;
		background: #fff;
		border-radius: 10rpx;
		margin-top: 40rpx;
	}

	.bottom-content {
		padding: 0 30rpx;
	}

	.vip-icon {
		margin-left: 20rpx;
		width: 25rpx;
		height: 25rpx;
	}
</style>
<style>
	/deep/.u-scroll-list {
		width: 690rpx;
	}
</style>